<template>
	<view class="search-page">
		<u-navbar title="" leftIcon="">
			<view class="flex align-center w-100 justify-between px-3 box-sizing" slot="center">
				<view class="bgF5F5F5 rounded-circle px-2 flex align-center flex-1">
					<image src="/static/imgs/search2.png" mode="aspectFill" style="width: 40rpx;height: 40rpx;"></image>
					<u--input :placeholder="$t('hhh.t53')" :focus="true" confirmType="search"  border="surround" clearable v-model.trim="searchVal" placeholderClass="placeholder"
						:customStyle="{
						'border':0
					}" @confirm="confirmSearch"></u--input>
				</view>
				<text class="ft300D45 fs-26 font-weight-bold ml-3" @tap="navBack">{{$t('hhh.t26')}}</text>
			</view>
		</u-navbar>
		<u-gap height="120" bgColor="transparent"></u-gap>

		<view class="">
			<view class="flex align-center justify-between mx-3">
				<text class="fs-32 font-weight-bold text-black">{{$t('hhh.t52')}}</text>
				<image v-if="!isdel" src="/static/imgs/del.png" mode="aspectFill" class="w-36 h-36" @tap="isdel = true"></image>
				<view class="flex align-center fs-24 ft999999" v-if="isdel">
					<text @tap="delall">{{$t('hhh.t50')}}</text>
					<text class="ml-4" @tap="isdel = false">{{$t('hhh.t51')}}</text>
				</view>
			</view>

			<view class="flex flex-wrap mt-3 mx-3">
				<view class="fs-24 text-black rounded-circle px-3 py-1 bgF1F4FF mr-2 mb-2 flex align-center" v-for="(item,index) in historyList"
					:key="index" >
					<text @tap="selectHistory(item)">{{item}}</text>
					<u-icon v-if="isdel" class="ml-2" name="close" size="20" @tap="delHistory(index)"></u-icon>
				</view>
			</view>
			<u-gap height="100" bgColor="transparent"></u-gap>
			<view class="bglg13 rounded-top-max-lg p-3 player-list">
				<view class="flex align-center mb-3">
					<image src="/static/imgs/hot2.png" mode="aspectFill" class="w-36 h-36"></image>
					<text class="fs-36 font-weight-bold text-black ml-2">{{$t('hhh.t1')}}</text>
				</view>

				<block v-for="(item,index) in dataList" :key="index">
					<cardItemVue :item="item"></cardItemVue>
				</block>
				<nodata v-if="dataList.length === 0"></nodata>
			</view>
		</view>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	import cardItemVue from '@/pages/index/components/card-item.vue'
	export default {
		components: {
			cardItemVue
		},
		data() {
			return {
				isdel: false,
				searchVal: '',
				page: 1,
				dataList: [],
				tempList: [],
				historyList:[]
			}
		},
		onLoad() {
			this.playerSearch()
		},
		onShow() {
			const list = uni.getStorageSync('searchList')
			if(list){
				this.historyList = list
			}
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.playerSearch()
		},
		methods: {
			selectHistory(item){
				this.searchVal = item
				this.playerSearch()
			},
			delHistory(index){
				this.historyList.splice(index,1)
				uni.setStorageSync('searchList',this.historyList)
			},
			confirmSearch(){
				if(this.searchVal && !this.historyList.includes(this.searchVal)){
					this.historyList.push(this.searchVal)
					uni.setStorageSync('searchList',this.historyList)
				}
				this.playerSearch()
			},
			playerSearch() {
				const data = {
					page: this.page,
					limit: 20
				}
				if(this.searchVal){
					data.name = this.searchVal
				}
				HttpApi.playerSearch(data).then(res => {
					if (res.code === 1) {
						const list = res.data.list || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				})
			},
			delall() {
				this.historyList = []
				uni.removeStorageSync('searchList')
			},
			navBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.search-page {
		.player-list {
			min-height: calc(100dvh - 280px);
		}
	}
</style>